<template>
  <div class="about">
    <my-add @add="add"></my-add>
    <my-running :list="list" @remove="remove" :num="num2"></my-running>
    <my-complate :list="list" @remove="remove" :num="num1"></my-complate>
  </div>
</template>
<script>
import myAdd from "../components/myAdd.vue";
//引入添加子组件
import myComplate from "../components/myComplate.vue";
//引入已完成子组件
import myRunning from "../components/myRunning.vue";
//引入正在进行子组件
export default {
  data() {
    return {
      list: [
        { title: "周瑜放火", status: false },
        { title: "燃起来吧", status: true },
        { title: "知识就是力量", status: true },
        { title: "萝莉身御姐音", status: false },
      ],
    };
  },
  components: {
    myAdd,
    myComplate,
    myRunning,
  },
  //注册子组件
  methods: {
    add(val) {
      this.list.push({ title: val, status: false });
    },
    //添加
    remove(index) {
      this.list.splice(index, 1);
    },
    //删除
  },
  computed: {
    num1() {
      let res = this.list.filter((i) => {
        return i.status == true;
      });
      //filter从现有的数组过滤出来一个新的数组 满足条件会被过滤
      return res.length;
      //必须要有一个return值 返回就是计算的结果 当跟这个计算属性相关的值发生变化会重新计算
    },
    //已经完成的有多少
    num2() {
      let res = this.list.filter((i) => i.status == false);
      //filter从现有的数组过滤出来一个新的数组 满足条件会被过滤
      return res.length;
    },
    //没有完成的数量
  },
  //计算属性看起来是一个函数 但是使用的时候跟data一样
};
</script>
